<template>
  <view class="outBox">
    <u-navbar leftText="点单" leftIconColor="#fff" :autoBack="false" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left" @click="backHome">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '点单' }}</text>
      </view>
    </u-navbar>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>
    <view class="innerBox">
      <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
        <scroll-view style="height: 100%" :scroll-top="scrollTop" scroll-y="true" class="left">
          <view class="item" :class="[typeIndex == -1 ? 'active' : '']" @click="clickTaoCan">
            <text>套餐</text>
          </view>
          <view class="item" :class="[typeIndex == index ? 'active' : '']" @click="getGoodsList(index)"
                v-for="(item,index) in typeList">
            {{ item.typeName }}
          </view>
        </scroll-view>
        <view class="right">
          <!-- 	<view class="searchBox">
            <u-search placeholder="请输入名称" v-model="searchValue" :showAction="false"></u-search>
          </view> -->
          <scroll-view :scroll-top="scrollTop" scroll-y="true" class="items">
            <view class="item" :style="{
              backgroundImage:`url(${bg})`
            }" v-for="item in dataList" @click="handleDetails(item)">
              <image :src="item.productPicPath" mode=""></image>
              <view class="info">
                <view class="title">
                  <text>{{ item.productName }}</text>
                </view>
                <view class="price">
                  <text>¥ {{ item.productSellingPrice }}</text>
                  <view class="operation">
                    <!--                    <u-icon name="minus-circle" color="#f96f45" v-if="item.orderNum > 0"-->
                    <!--                            @click.stop="handleDecrease(item)" size="22"></u-icon>-->
                    <image src="/static/order/icon3.png" v-if="item.orderNum > 0"
                           @click.stop="handleDecrease(item)" mode="widthFix"/>
                    <text v-if="item.orderNum > 0">{{ item.orderNum }}</text>
                    <!--                    <u-icon name="plus-circle" color="#f96f45" size="22"-->
                    <!--                            @click.stop="handleIncrease(item)"></u-icon>-->
                    <image src="/static/order/icon2.png" @click.stop="handleIncrease(item)"
                           mode="widthFix"/>
                  </view>
                </view>
              </view>
            </view>

          </scroll-view>


          <!-- 	<view class="cartBtn" @click="getnav('/pages/order/cart')">
            <view class="circle">
              <text>{{carNum}}</text>
            </view>
            <image src="../../static/order/icon1.png" mode="widthFix"></image>
          </view> -->
        </view>
      </view>
      <view class="footer">
        <view class="left">
          <view class="cart">
            <view class="circle">
              <text>{{ getCartInfo().num || 0 }}</text>
            </view>
            <image src="/static/order/icon4.png" mode="widthFix"></image>
          </view>
          <view class="price">
            <text>¥ {{ getCartInfo().price }}</text>
          </view>
        </view>
        <view class="btnOut">
          <view class="btn" @click="handleSuc">
            <text>下单结算</text>
          </view>
        </view>
      </view>
    </view>
    <diaBox ref="diaBoxRef" title="套餐详情" :show-btns="false">
      <template v-slot:dia-cont>
        <view class="diaCont">
          <view class="items">
            <view class="item one">
              <text>套餐</text>
              <text>数量</text>
            </view>
            <view class="item" v-for="item in tcList">
              <text>{{ item.productName }}</text>
              <text>X{{ item.num }}</text>
            </view>
          </view>
        </view>
      </template>
    </diaBox>
    <u-popup :show="showDia" mode="bottom" :custom-style="{
			background:'transparent'
		}" :round="20" @close="showDia = false">
      <view class="header">
        <view class="left">
          <text>{{ curItem.packageName }}</text>
          <text>SET MENU</text>
        </view>
        <view class="img">
          <image :src="curItem.productPicPath" mode="widthFix"></image>
        </view>
      </view>
      <view class="cont">
        <view class="fiexItem">
          <view class="img">
            <image :src="curItem.packagePicPath" mode="widthFix"></image>
          </view>
          <view class="text">
            <view class="tit">{{ curItem.packageName }}</view>
            <view class="desc">{{ curItem.packageProductNames }}</view>
          </view>
        </view>

        <scroll-view scroll-y="true" style="height: 50vh">
          <view class="items">
            <view class="item" v-for="(item,index) in curItem.optionalProductNum">
              <view class="title" @click.stop="handleDropDown(index)" v-if="kxTcChoice[index] == 0">
                <text>套餐商品{{ index + 1 }}</text>
                <view class="icon">
                  <u-icon size="15" color="#fff" name="arrow-down"></u-icon>
                </view>
              </view>
              <view class="title" @click.stop="handleDropDown(index)" v-else>
                <image :src="getCurrentGoodsInfo(kxTcChoice[index]).productPicPath" mode="widthFix">
                </image>
                <text>{{ getCurrentGoodsInfo(kxTcChoice[index]).productName }}</text>
                <view class="icon">
                  <u-icon size="15" color="#fff" name="arrow-down"></u-icon>
                </view>
              </view>
              <view class="list" v-if="dropDownList.includes(index)">
                <u-radio-group v-model="kxTcChoice[index]" placement="column" @change="groupChange">
                  <view class="listOne" v-for="goods in kxTcList">
                    <image :src="goods.productPicPath" mode="widthFix"></image>
                    <text>{{ goods.productName }}</text>
                    <view class="icon">
                      <view class="disableBox" v-if="getCurrentDisable(goods,index)"
                            @click="showTip(goods)"></view>
                      <u-radio activeColor="#60c4c0" :name="goods.id" :disabled="getCurrentDisable(goods,index)">
                      </u-radio>
                    </view>
                  </view>
                </u-radio-group>
              </view>
            </view>
          </view>

        </scroll-view>
        <view class="btns">
          <view class="btnOut btnOut2">
            <view class="btn" @click="handleSucTc">
              <text>确认选择</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <userLogin ref="userLoginRef"/>
  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'

import bg from "@/static/mine/bg2.png";

import {
  getGoodsTypeListApi,
  getGoodsListApi,
  getTCGoodsListApi,
  findDetailListApi,
  getCarListApi,
  orderInfoApi,
  listForPadApi
} from '../../api/api';
import diaBox from "@/components/diaBox/index.vue";
import {
  BaseUrl
} from "@/utils/staticResource";
import choice from "@/pages/reservation/choice.vue";

export default {
  components: {
    diaBox
  },
  data() {
    return {
      bg: bg,
      // 胶囊的宽度
      barWidth: 0,
      barHeight: 0,
      searchValue: '', // 搜索值
      carNum: 0,
      menuHeight: 0,
      // 商品类型列表
      typeList: [],
      // 类型下标
      typeIndex: 0,
      // 商品列表
      dataList: [],
      choiceDataList: [],
      // 桌号
      counterNo: '',
      videoUrl: this.$videoUrl,
      showDia: false,
      tcList: [], // 套餐内容列表
      kxTcList: [], // 可选套餐内容列表
      curItem: {},
      kxTcChoice: [],
      dropDownList: [],
      kxTcListCopy: [],
      sendMsgObj:{}, // socket初始化参数
    }
  },
  async onLoad(e) {
    if (e.q) {
      let codeStr = decodeURIComponent(e.q)
      const urlObj = this.getParamobj(codeStr)
      if (!urlObj.counterNo) return this.$toast("counterNo为空")
      this.counterNo = urlObj.counterNo
    }

    if (e.counterNo) this.counterNo = e.counterNo
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    // uni.removeStorageSync("choiceDataList")
    const isLogin = this.getIsLogin()

    if (isLogin) {
      this.getInitSocketData()
    }
  },
  async onShow() {
    if (this.typeIndex == -1) {
      await this.clickTaoCan()
    }
    console.log(this.sendMsgObj.counterNo,":this.sendMsgObj.counterNo")
    if(this.sendMsgObj.counterNo){
      await this.initData()
    }
  },
  methods: {
    // 点击确认
    handleSucTc() {
      // 校验是否都选择了
      for (let i = 0; i < this.kxTcChoice.length; i++) {
        if (this.kxTcChoice[i] == 0) {
          uni.$u.toast(`请选择套餐${i + 1}商品`)
          return
        }
      }
      // 如果都选择了，要把这些商品添加到choice列表
      const datas = []
      this.kxTcChoice.forEach(item => {
        datas.push(this.kxTcListCopy.find(arr => arr.id == item))
      })

      const newArr = []
      datas.forEach(item => {
        const obj = {
          "orderChannel": 1,
          "relaType": 4,
          "relaId": item.id,
          "serviceId": this.curItem.id, // 套餐的id
          "orderNum": 1,
          "unitPrice": item.productSellingPrice,
          "totalPrice": item.productSellingPrice,
        }
        const findObj = newArr.find(arr => arr.relaId == obj.relaId)

        if(!findObj){
          newArr.push(obj)
        }else{
          findObj.orderNum += 1
          findObj.totalPrice += item.productSellingPrice
        }
      })

      this.choiceDataList.push(...newArr)


      // 单独把套餐加进去
      this.choiceDataList.push({
        "orderChannel": 1,
        "relaType": 4,
        "relaId": this.curItem.id,
        "serviceId": -1,
        "orderNum": 1,
        "unitPrice": this.curItem.productSellingPrice,
        "totalPrice": this.curItem.productSellingPrice,
      })
      this.showDia = false

      // 把商品数量加1
      this.dataList.forEach(item => {
        if (item.id == this.curItem.id) {
          item.orderNum += 1
        }
      })

      // 发送购物车数据
      this.sendMsgObj = {
        ...this.sendMsgObj,
        "counterOrderFlowDetailList": this.choiceDataList
      }

      uni.sendSocketMessage({
        data: JSON.stringify( this.sendMsgObj),
      })
    },
    showTip(goods) {
      console.log(goods, "goods");
      if (goods.productStock == 0) {
        uni.$u.toast("库存不足")
      }
    },
    // 判断库存是否充足
    getCurrentDisable(goods, index) {
      let stock = goods.productStock
      if (this.kxTcChoice[index] == goods.id) stock += 1
      return !(stock > 0)
    },
    getCurrentGoodsInfo(id) {
      return this.kxTcList.find(item => item.id == id)
    },
    handleDropDown(index) {
      const i = this.dropDownList.findIndex(item => item == index)
      if (i == -1) {
        this.dropDownList.push(index)
      } else {
        this.dropDownList.splice(i, 1)
      }
    },
    // 获取socket初始化连接参数
    async getInitSocketData() {
      const res = await orderInfoApi(this.counterNo)
      if (res.code === 200) {
        this.sendMsgObj = {
          ...res.data
        }
        this.initWebSocket()
        await this.initData()
      }
    },
    // socket建立连接
    initWebSocket() {
      // 去除http
      const url = BaseUrl.replace(/http:\/\//, '')
      const token = uni.getStorageSync("token")
      const socket = uni.connectSocket({
        url: 'ws://' + url + 'websocket/cart?Authorization=' + token,
      });

      const _this = this

      uni.onSocketOpen(function (res) {
        _this.socketConnect = true

        // this.sendMsgObj = {
        //   ...this.sendMsgObj,
        //   counterOrderFlowDetailList: []
        // }
        // uni.sendSocketMessage({
        //   data: JSON.stringify( this.sendMsgObj),
        // })
        // 每10秒发一个心跳
        setInterval(() => {
          uni.sendSocketMessage({
            data: JSON.stringify("ping"),
          })
        }, 10000)
      });

      uni.onSocketMessage(function (res) {
        const data = JSON.parse(res.data)
        if (data == 'vue调用 连接成功') return
        _this.sendMsgObj = data
        if (_this.sendMsgObj?.counterOrderFlowDetailList) {
          _this.choiceDataList = _this.sendMsgObj.counterOrderFlowDetailList

          // 改变原始数据
          _this.dataList = _this.dataList.map(item => {
            item.orderNum = _this.choiceDataList.find(item2 => {
              if(item2.serviceId != -1) return false
              return item2.relaId == item.id
            })
                ?.orderNum || 0
            return item
          })
        }
      })
    },
    // 改变单选
    groupChange(e) {
      // 恢复库存
      this.kxTcList = JSON.parse(JSON.stringify(this.kxTcListCopy))
      this.kxTcChoice.forEach(item => {

        const index = this.kxTcList.findIndex(goods => goods.id == item)
        if (index != -1) {
          this.kxTcList[index].productStock -= 1
        }
      })

      console.log(this.kxTcList, "this.kxTcList");
      console.log(this.kxTcChoice, "kxTcChoice");
    },
    // 查看详情
    async handleDetails(item) {
      if (this.typeIndex != -1) return
      const res = await findDetailListApi(item.id)
      console.log(res, "res");
      if (res.code == 200) {
        this.tcList = res.data
        this.$refs.diaBoxRef.show = true
      }
    },
    backHome() {
      uni.switchTab({
        url: "/pages/home/index"
      })
    },
    // 获取登陆信息
    getIsLogin() {
      if (!uni.getStorageSync('token') || (uni.getStorageSync('userInfo') == "null" || !uni.getStorageSync(
          "userInfo"))) {
        // if (!uni.getStorageSync('token')){
        uni.setStorageSync('showLogin', true)
        this.$refs.userLoginRef.showLogin = true
        return false
      }
      return true
    },
    getParamobj(path) { //根据url里的参数，全部转换为obj
      if (path.split("#/?").length > 1) {
        if (path.split("?").length > 1) {
          var params = path.split("?")[1].split("&")
          var obj = {}
          params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
          return obj;
        } else return '';
      } else {
        if (path.split("#").length > 1) {
          path = path.split('#')[0];
        }
        if (path.split("?").length > 1) {
          var params = path.split("?")[1].split("&")
          var obj = {}
          params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
          return obj;
        } else return '';
      }
    },
    // 下单结算
    handleSuc() {
      // this.sendMsgObj = {
      //   ...this.sendMsgObj,
      //   counterOrderFlowDetailList: []
      // }
      // uni.sendSocketMessage({
      //   data: JSON.stringify( this.sendMsgObj),
      // })
      // return
      // let dataList = uni.getStorageSync("choiceDataList")
      let dataList = JSON.parse(JSON.stringify(this.choiceDataList))
      if (dataList) {
        dataList = dataList.filter(item => item.orderNum > 0)
      }
      if (!dataList) return this.$toast("请选择商品")
      if (dataList.length == 0) return this.$toast("请选择商品")
		const sendMsgObj = {
			counterNo:this.sendMsgObj.counterNo,
			counterOrderNo:this.sendMsgObj.counterOrderNo,
			counterDetailId:this.sendMsgObj.counterDetailId,
		}
      uni.setStorageSync("sendMsgObj", sendMsgObj)
      this.getnav("details?counterNo=" + this.counterNo)
    },
    // 获取购物车信息
    getCartInfo() {
      const obj = {
        num: 0,
        price: 0
      }
      if (this.choiceDataList?.length > 0) {
        this.choiceDataList.forEach(item => {
          if (item.serviceId != -1) return
          obj.num += item.orderNum
          obj.price += (item.orderNum * item.unitPrice)
        })
      }

      // 处理price 精度问题
      obj.price = obj.price.toFixed(2)
      return obj
    },
    // 改变购物车列表
    changeChoiceData(item, type) {
      console.log(this.choiceDataList, "this.choiceDataList")
      let obj = this.choiceDataList.find(one => one.relaId == item.id)
      console.log(obj,"obj")
      console.log(item, "item");
      if (type == 1) {
        if (obj) {
          obj = {
            "orderChannel": 1,
            "relaType": item.relaType,
            "relaId": item.id,
            "orderNum": obj.orderNum + 1,
            "serviceId": -1,
            "unitPrice": item.productSellingPrice,
            "totalPrice": item.productSellingPrice * obj.orderNum,
          }
        } else {
          obj = {
            "orderChannel": 1,
            "relaType": item.relaType,
            "relaId": item.id,
            "orderNum": 1,
            "serviceId": -1,
            "unitPrice": item.productSellingPrice,
            "totalPrice": item.productSellingPrice * 1,
          }
          this.choiceDataList.push(obj)
        }
      } else {
        const num = obj.orderNum - 1
        obj = {
          "orderChannel": 1,
          "relaType": item.relaType,
          "relaId": item.id,
          "orderNum": num,
          "serviceId": -1,
          "unitPrice": item.productSellingPrice,
          "totalPrice": item.productSellingPrice * obj.orderNum,
        }
      }

      this.choiceDataList = this.choiceDataList.map(item => {
        if (item.relaId == obj.relaId) {
          return obj
        } else {
          return item
        }
      })


      // 过滤数量为0的
      this.choiceDataList = this.choiceDataList.filter(item => item.orderNum > 0)

      this.sendMsgObj = {
        ...this.sendMsgObj,
        counterOrderFlowDetailList: this.choiceDataList
      }
      uni.sendSocketMessage({
        data: JSON.stringify(this.sendMsgObj),
      })

      // uni.setStorageSync("choiceDataList", this.choiceDataList)
    },
    // 增加
    async handleIncrease(item) {
      console.log(item, "item");
      console.log(this.choiceDataList,"之前")
      if (item.orderNum >= item.productStock) return this.$toast("当前库存不足")
      // 如果是套餐
      if (this.typeIndex == -1) {
        console.log(item.optionalProductTypeId, "item.optionalProductTypeId");
        if (item.optionalProductTypeId != null && item.optionalProductTypeId != 0) {
          // 判断是否已经被选了
          if (this.choiceDataList.findIndex(choice => choice.relaId == item.id) != -1) {
            item.orderNum += 1
            // 找到这个套餐的小商品，数量+1
            this.choiceDataList = this.choiceDataList.map(choice => {
              if (choice.serviceId == item.id) {
                choice.orderNum = item.orderNum
              }
              return choice
            })
            console.log(this.choiceDataList,"增加之后")
            this.changeChoiceData(item, 1)
          }else{
            // 弹窗
            const res = await listForPadApi(item.optionalProductTypeId)
            if (res.code == 200) {
              this.kxTcList = res.data
              this.kxTcListCopy = JSON.parse(JSON.stringify(this.kxTcList))
              console.log(this.kxTcList, "kxTcList");
              this.showDia = true
              this.curItem = item
              // 初始化一个item.optionalProductNum长度的空数组
              this.kxTcChoice = Array(item.optionalProductNum).fill(0)
            }
          }

        } else {
          item.orderNum += 1
          this.changeChoiceData(item, 1)
        }
      } else {
        item.orderNum += 1
        this.changeChoiceData(item, 1)
      }
    },
    // 减少商品
    handleDecrease(item) {
      if (item.orderNum == 0) return
      item.orderNum -= 1

      // 删除套餐下的所有已选商品中serviceId为item.id的 数量全部减少1
     this.choiceDataList.forEach(choice => {
       if(choice.serviceId == item.id){
         console.log( choice.orderNum," choice.orderNum")
         choice.orderNum -= 1
         console.log("剪完了",choice.orderNum)
       }
      })
      console.log(this.choiceDataList,"this.choiceDataList")

      this.changeChoiceData(item, 2)

    },
    // 初始化选中列表
    async initData() {
      const res = await getCarListApi(this.sendMsgObj)
      if (res.code == 200) {
        this.choiceDataList = res.data.counterOrderFlowDetailList
        await this.getTypeList()
      }
    },
    // 获取套餐列表
    async clickTaoCan() {
      this.typeIndex = -1
      const res = await getTCGoodsListApi()
      if (res.code == 200) {
        this.dataList = res.data.map(item => {
          const choice = this.choiceDataList.find(choice => choice.relaId == item.id)
          return {
            id: item.id,
            relaType: 2,
            packageProductNames: item.packageProductNames,
            packageName: item.packageName,
            optionalProductNum: item.optionalProductNum,
            optionalProductTypeId: item.optionalProductTypeId,
            productSellingPrice: item.packageSellingPrice,
            productName: item.packageName,
            productPicPath: item.packagePicPath,
            orderNum: choice?.orderNum ? choice.orderNum : 0,
          }
        })
      }
    },
    // 获取类型列表
    async getTypeList() {
      const res = await getGoodsTypeListApi()
      if (res.code == 200) {
        this.typeList = res.data
        await this.getGoodsList(this.typeIndex)
      }
    },
    // 获取商品列表
    async getGoodsList(index) {
      const data = {
        typeId: this.typeList[index].id
      }
      this.typeIndex = index
      const res = await getGoodsListApi(data)
      if (res.code == 200) {
        this.dataList = res.data.map(item => {
          let choice
          if (this.choiceDataList.length > 0) {
            choice = this.choiceDataList.find(choice => choice.relaId == item.id)
          }
          console.log(choice, "choice")
          return {
            ...item,
            relaType: 1,
            orderNum: choice?.orderNum ? choice.orderNum : 0,
          }
        })

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;

  .btnOut {
    flex: 1;
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
    margin-right: 50rpx;
    height: 90rpx;

    &:last-child {
      margin-right: 0;
    }

    .btn {
      background-color: #B3B4C3;
    }
  }

  .btnOut2 {
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

    .btn {
      background: #2cb3af;
    }
  }

  .btn {
    width: 100%;
    font-weight: 600;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 90rpx;
    text-align: center;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
  }
}

.cont {
  padding: 0 72rpx;
  background-image: linear-gradient(to bottom, #13191a, #000);

  .items {
    width: 100%;
    padding-top: 20rpx;
    height: 50vh;
  }

  .list {
    margin-top: 50rpx;
    border: 2rpx solid #4e7675;
    background:  linear-gradient(145deg, rgba(4,208,193,0.34), rgba(8, 16, 16, 0.5)); /* 渐变背景 */
    border-radius: 30rpx;
    padding: 30rpx;

    .listOne {
      margin-bottom: 20rpx;
      display: flex;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #cbcded;
      position: relative;

      &:last-child {
        border-bottom: none;
        padding-bottom: 0rpx;
      }

      .icon {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);

        .disableBox {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          z-index: 99;
        }
      }

      text {
        color: #fff;
        display: flex;
        align-items: center;
      }

      image {
        width: 64rpx;
        height: 64rpx;
        margin-right: 20rpx;
      }
    }
  }

  .item {
    border-radius: 30rpx;
    border: 2rpx solid #4e7675;
    background: linear-gradient(145deg, rgba(59,202,191,0.5), rgba(8, 16, 16, 0.5)); /* 渐变背景 */

    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999;
    top: -20rpx;
    padding: 30rpx 30rpx;
    margin-bottom: 30rpx;

    .title {
      display: flex;
      align-items: center;

      text {
        color: #fff;
      }

      image {
        width: 64rpx;
        height: 64rpx;
        margin-right: 20rpx;
      }

      .icon {
        position: absolute;
        right: 30rpx;
        top: 60rpx;
        transform: translateY(-50%);
      }
    }

  }

  .fiexItem {
    border-radius: 30rpx;
    border: 2rpx solid #4e7675;
    //background: #2c4f4f;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    background: linear-gradient(145deg, rgba(59,202,191,0.5), rgba(8, 16, 16, 0.5)); /* 渐变背景 */
    display: flex;
    position: relative;
    top: -50rpx;
    z-index: 999;
    padding: 30rpx 30rpx;

    .img {
      margin-right: 20rpx;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }
    }

    .text {
      .tit {
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
      }

      .desc {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #0FC6C2;
        line-height: 48rpx;
      }
    }
  }

}

.header {
  display: flex;
  justify-content: space-between;
  height: 226rpx;
  background-image: linear-gradient(to bottom, #336866, #13191a);
  // opacity: 0.46;
  // filter: blur(50px);
  padding: 44rpx 72rpx;
  position: relative;
  border-radius: 40rpx 40rpx 0 0;

  .left {
    display: flex;
    flex-direction: column;

    text {
      &:nth-child(1) {
        font-weight: 600;
        font-size: 48rpx;
        color: #FFFFFF;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
        margin-bottom: 8rpx;
      }

      &:nth-child(2) {
        font-weight: 600;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 32rpx;
        text-align: left;
        font-style: normal;
        text-transform: uppercase;
        color: #5e8784;
      }
    }
  }

  .tag {
    width: 76rpx;
    height: 40rpx;
    background: #FF9A2E;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;

    text {
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }

  .img {
    position: absolute;
    right: 44rpx;
    top: -100rpx;

    image {
      width: 288rpx;
    }
  }
}

.diaCont {
  margin-top: 52rpx;

  .bgBox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
  }

  .items {
    border-radius: 22rpx;
    border: 2rpx solid #979797;
    overflow: hidden;


  }

  .items {
    margin-top: 30rpx;

    .item {
      padding: 0 68rpx;
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      color: #fff;
      margin: 0 !important;
      line-height: 84rpx;

      &:nth-child(2n) {
        background: #2d2e33;
      }
    }

    .one {
      color: #86909C;
    }
  }

  .diaBox {
    background: rgba(38, 42, 74, 0.8);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #5D617E;
    width: 90vw;
  }

  .item {
    display: flex;
    justify-content: space-between;
    padding: 40rpx;
    margin-bottom: 18rpx;
    box-sizing: border-box;
    background-size: 100% 100%;
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 180rpx;
  padding: 0 46rpx;
  position: relative;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;

  .left {
    display: flex;

    .price {
      font-size: 36rpx;
      margin-left: 50rpx;
      display: flex;
      align-items: center;

      text {
        font-weight: 500;
        font-size: 41rpx;
        color: #FFFFFF;
        line-height: 59rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .cart {
      position: relative;

      .circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 26rpx;
        height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FF6048;
        border-radius: 50%;
        box-shadow: inset 0rpx 0rpx 12rpx 0rpx rgba(255, 255, 255, 0.5);

        text {
          font-size: 18rpx;
          color: #fff;
        }
      }
    }

    image {
      width: 76rpx;
    }
  }

  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }

  .btn {
    width: 212rpx;
    height: 80rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    border-radius: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2bafad;

    text {
      font-size: 32rpx;
      color: #fff;
    }
  }
}


.content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  z-index: 9;
  min-height: 0;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 38rpx;
  box-sizing: border-box;

  .right {
    flex: 1;
    min-height: 0;
    margin-left: 18rpx;
    display: flex;
    flex-direction: column;

    .searchBox {
      margin-bottom: 20rpx;
    }

    .items {
      flex: 1;
      min-height: 0;

      .item {
        padding: 30rpx;
        margin-bottom: 18rpx;
        display: flex;
        background-size: 100% 100%;

        image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
          border-radius: 20rpx;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10rpx 0;
          margin-left: 36rpx;

          .title {
            font-size: 36rpx;
            color: #fff;
          }

          .price {
            font-weight: 500;
            font-size: 28rpx;
            color: #0FC6C2;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            display: flex;
            justify-content: space-between;

            image {
              width: 36rpx;
              margin: 0 !important;
            }
          }
        }
      }
    }

  }

  .left {
    width: 168rpx;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 0rpx 36rpx 0rpx 0rpx;
    border: 2rpx solid #233235;
    overflow: hidden;
    backdrop-filter: blur(7px);

    .item {
      line-height: 80rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #86909C;
      font-style: normal;
      text-align: center;
    }

    .active {
      background: linear-gradient(270deg, #0FC6C2 0%, rgba(15, 198, 194, 0) 100%);
      opacity: 0.62;
      color: #fff;
    }
  }
}


.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  .left-slot {
    color: #fff;

    image {
      width: 40rpx;
      margin-right: 30rpx;
    }
  }

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.innerBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.outBox {
  background-color: #1d1e2e;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 38rpx;
  width: 100%;
  box-sizing: border-box;

  .name {
    color: #fff;
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.operation {
  display: flex;
  align-items: center;

  text {
    width: 50rpx;
    text-align: center;
  }
}
</style>
